
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Input, Button, Select, Form, message } from 'antd';
import cls from 'classnames';
import request from '@/utils/request';
import ai01 from '@/assets/img/ai_701.png';
import ai02 from '@/assets/img/ai_702.png';
import ai03 from '@/assets/img/ai_703.png';
import ai04 from '@/assets/img/ai_704.png';
import ai05 from '@/assets/img/ai_705.png';
import ai06 from '@/assets/img/ai_706.png';
import ai07 from '@/assets/img/ai_707.png';
import ai08 from '@/assets/img/ai_708.png';
import ai09 from '@/assets/img/ai_709.png';
import ai10 from '@/assets/img/ai_710.png';
import ai11 from '@/assets/img/ai_711.png';
import ai12 from '@/assets/img/ai_712.png';
import ai13 from '@/assets/img/ai_713.png';
import ai14 from '@/assets/img/ai_714.png';
import ai15 from '@/assets/img/ai_715.png';
import ai16 from '@/assets/img/ai_716.png';
import ai17 from '@/assets/img/ai_717.png';
import style from './index.less';

const {Option} = Select;

function draw(option: Record<string, string>) {
    return request('/api/ai/draw/img?platform=baidu&type=basic', {
        method: 'POST',
        data: { option }
    })
}

async function queryTask(taskId: string, callback: any) {

    const { data } = await request(`/api/ai/draw/query?platform=baidu&type=basic&taskId=${taskId}`, {
        method: 'POST'
    })

    if (data.data.status === 1) {
        return callback(data.data)
    }

    setTimeout(() => {
        queryTask(taskId, callback)
    }, 3000)

}


function useAiImgDraw() {

    const [loading, setLoading] = useState(false);
    const [form] = Form.useForm();
    const [img, setImg] = useState<string>('')
    const resolution = useMemo(() => ['1024*1024', '1024*1536', '1536*1024'], []);


    const handleSubmit = useCallback(() => {
        const next = async () => {
            const formValue = await form.validateFields()
            if (formValue) {
                setLoading(true)
                const { data } = await draw(formValue);
                if (data?.data?.taskId) {
                    queryTask(data.data.taskId, (dt: any) => {
                        setLoading(false)
                        setImg(dt.img)
                    })
                } else if (data?.error_code === 110) {
                        message.error(data.error_msg);

                    }

            }
        }

        next()
    }, [])

    // useEffect(() => {
    //     queryTask('16870459').then(rs => {

    //         console.log(rs)
    //     })
    // }, [])

    return {
        loading,
        form,
        resolution,
        handleSubmit,
        img
    }

}


const StyleCom = ({ value, onChange }) => {

    const [select, setSelect] = useState(value);
    const list = [
        {
            url: ai01,
            name: '探索无限'
        },
        {
            url: ai02,
            name: '古风'
        },
        {
            url: ai03,
            name: '二次元'
        },
        {
            url: ai04,
            name: '写实风格'
        },
        {
            url: ai05,
            name: '浮世绘'
        },
        {
            url: ai06,
            name: 'low poly'
        },
        {
            url: ai07,
            name: '未来主义'
        },
        {
            url: ai08,
            name: '像素风格'
        },
        {
            url: ai09,
            name: '概念艺术'
        },
        {
            url: ai10,
            name: '赛博朋克'
        },
        {
            url: ai11,
            name: '洛丽塔风格'
        },
        {
            url: ai12,
            name: '巴洛克风格'
        },
        {
            url: ai13,
            name: '超现实主义'
        },
        {
            url: ai14,
            name: '水彩画'
        },
        {
            url: ai15,
            name: '蒸汽波艺术'
        },
        {
            url: ai16,
            name: '油画'
        },
        {
            url: ai17,
            name: '卡通画'
        },
    ]

    return (
        <ul className={style.style_ul}>
            {
                list.map((st: any, index: number) => {
                    return <li key={index} className={cls({
                        [style.selected]: st.name === select
                    })} onClick={() => {
                        setSelect(st.name);
                        onChange(st.name);
                    }}>
                        <img src={st.url} />
                        <p className={style.style_name}>{st.name}</p>
                    </li>
                })
            }
        </ul>
    )
}

const AIImage: React.FC<{}> = () => {

    const { resolution, form, loading, handleSubmit, img } = useAiImgDraw()

    return (
        <PageHeaderWrapper>
            <div className={style["ai-wrapper"]}>
                <div className={style.ai_image_content}>
                    <div className={style.ai_image_title}>AI图片生成器</div>
                    <Form layout="vertical" form={form}>
                        <Form.Item name="text" rules={[{ required: true, message: '画面描述不能为空' }]} required label="画面描述">
                            <Input.TextArea className={style.ai_text_textarea} placeholder='请输入画面描述' />
                        </Form.Item>
                        <Form.Item name="resolution" rules={[{ required: true, message: '分辨率不能为空' }]} required label="分辨率">
                            <Select placeholder='请选择分辨率'>
                                {
                                    resolution.map(it => {
                                        return <Option key={it}>{it}</Option>
                                    })
                                }
                            </Select>
                        </Form.Item>
                        <Form.Item name="style" rules={[{ required: true, message: '风格不能为空' }]} required label="风格">
                            <StyleCom />
                        </Form.Item>
                    </Form>
                    <Button className={style.ai_text_btn} type='primary' loading={loading} onClick={() => handleSubmit()}>生成</Button>
                </div>
                <div className={style['ai-extra']}>
                    <div className={style['ai-img']}>
                        {img && <img src={img} />}
                    </div>
                </div>
            </div>
        </PageHeaderWrapper>
    );
};

export default AIImage;
